<template>
  <div class="img-upload">
    <Upload ref="upload"
            :format="['jpg','png']"
            :max-size="500"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :on-success="handleSuccess"
            type="drag"
            v-bind="$attrs"
            v-on="$listeners"
            :show-upload-list="false"
            :action="$config.uploadImg"
            style="display: inline-block;width:96px;">

      <img :src="imgUrl?imgUrl:defaultUrl"
           style="display: inline-block;width:96px;height:96px;vertical-align: top;"
           alt="">
      <p class="replace_tit"
         v-if="imgUrl"
         @click.stop="removeshopImage">删除</p>
    </Upload>
    <div style="width:165px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;display: none;vertical-align:top;">
      <p>支持格式：jpg、png</p>
      <p>规格：自动适配</p>
      <p>大小：≤500K</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UploadImg',
  data () {
    return {
      defaultUrl: require('@/assets/images/default.png')
    }
  },
  computed: {
  },
  props: {
    imgType: {
      type: Number,
      default: 1
    },
    imgUrl: {
      type: String,
      default: ''
    }
  },
  mounted () {
  },
  methods: {
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超过限制大小，请重新上传'
      })
    },
    removeshopImage () {
      this.$emit('update:imgUrl', '')
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '上传的图片格式错误'
      })
    },
    handleSuccess (response, file, fileList) {
      this.$emit('update:imgUrl', response.full_img_url)
      this.$emit('set-img', response.full_img_url)
    }
  }
}
</script>

<style lang="less">
.img-upload {
  .ivu-upload {
    width: 96px;
    height: 96px;
    position: relative;
    .replace_tit {
      position: absolute;
      bottom: 0;
      width: 96px;
      opacity: 0.6;
      background: #ed4014;
      height: 24px;
      text-align: center;
      line-height: 24px;
      font-size: 12px;
      color: #ffffff;
      display: none;
    }
  }
  .ivu-upload:hover .replace_tit {
    display: block;
  }
}
</style>
